<template>
  <s-layout
    title="我的资产"
    navbar="inner"
    :bgStyle="template.style?.background"
    :navbarStyle="template.style?.navbar"
  >
    <view class="count-wrapper">
      <view class="count">19.80</view>
      <view class="tips">收益</view>
    </view>
    <view class="list">
      <view class="list-title">收益明细</view>
      <view class="list-item" v-for="(item,index) in 5" :key="index">
        <view class="item">
          <view class="label">推荐类型</view>
          <view class="value">124234档</view>
        </view>
        <view class="item">
          <view class="label">推荐好友</view>
          <view class="value">124234档</view>
        </view>
        <view class="item">
          <view class="label">分佣比例</view>
          <view class="value primary-color">124234档</view>
        </view>
        <view class="item">
          <view class="label">分佣金额</view>
          <view class="value">124234档</view>
        </view>
        <view class="item">
          <view class="label">分佣时间</view>
          <view class="value">124234档</view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import { computed } from 'vue';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import sheep from '@/sheep';

  const template = computed(() => sheep.$store('app').template?.home);
</script>


<style scoped lang="scss">
  .count-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 400rpx;
    justify-content: center;

    .count {
      font-weight: 600;
      font-size: 80rpx;
      color: #36F6AF;
    }

    .tips {
      margin-top: 30rpx;
      font-size: 24rpx;
      color: #CDCDCD;
    }
  }

  .list {
    padding: 0 30rpx;

    .list-title {
      font-size: 36rpx;
      color: #fff;
      margin-bottom: 27rpx;
    }


    .list-item {
      border-radius: 20rpx;
      background-color: #1e1e1e;
      margin-bottom: 22rpx;
      padding: 30rpx;
      font-size: 24rpx;

      .item {
        padding-bottom: 20rpx;
        display: flex;
        justify-content: space-between;

        .label {
          color: #868686;
        }

        .value {
          color: #fff;
        }

        &:last-child {
          padding-bottom: 0;
        }
      }
    }
  }

  .primary-color {
    color: #00A1FF !important;
  }

  .warning-color {
    color: #F17126 !important;
  }

  .danger-color {
    color: #FF0000 !important;
  }

  .success-color {
    color: #13C093 !important;
  }
</style>
